<template>
  <div class="login">
    <div class="form" >
      <div class="icon"><img src="../../../assets/login/person-01.png"></div>
      <van-form @failed="onFailed" ref='form'>
      <van-cell-group inset>
        <van-field  placeholder="请输入姓名" class="field" :rules="[{ validator: nameValidator, message: '姓名请输入汉字' }]"  v-model="nameValue"/>
        <van-field placeholder="请输入手机号" class="field" :rules="[{ validator: phoneValidator, message: '手机号码不合法' }]" v-model="phoneValue"/>
        <van-field placeholder="请输入密码" class="field" type="password" :rules="[{ validator: pwdValidator, message: '密码请输入6到14位的字母或数字' }] " v-model="pwdValue"/>

      </van-cell-group>
      <van-button type="primary" class="loginButtom"   round block  native-type="submit" @click="submit">注册</van-button>
      </van-form>
    </div>
  </div>
</template>


<script setup>
import { useRoute, useRouter } from "vue-router";
import { post } from "../../../utils/request.js";
import { ref, toRefs } from "vue";
import { Toast } from "vant";
const route = useRoute();
const router = useRouter();
const nameValue=ref('')
const phoneValue=ref('')
const pwdValue=ref('')
const emit=defineEmits(['login'])
  const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };
 const nameValidator = (val) => /^[\u4e00-\u9fa5]{2,12}$/.test(val);
 const phoneValidator = (val) => /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val);
 const pwdValidator = (val) => /^[A-Za-z0-9]{6,14}$/.test(val);
const form=ref(null)
  const submit=()=> {
                    // 全局表单验证
                   form.value.validate().then(() => {
                    regiest()
                        // this.$toast.success({message:'您输入的内容不合法，请重新输入', forbidClick: true,})
                    }).catch(() => {
                       Toast.fail({message:'您输入的内容不合法，请重新输入', forbidClick: true,})
                    })
                } 

let regiest=async()=>{
  const data = {
    name: `${nameValue.value}`,
    password: `${pwdValue.value}`,
    phone: `${phoneValue.value}`,
  };
  let result
  try {
    result = await post("/register", data);
  } catch (error) {
      let timer=setTimeout(() => {
      Toast.clear();
      Toast.fail({message:'登陆失败，请稍后重新登陆', forbidClick: true,})
      clearTimeout(timer)
    }, 3000);
  }
   if (result.status==200) {
    setTimeout(() => {
      Toast.clear();
      Toast.success({message:'登陆成功，跳回登录页', forbidClick: true,})
      setTimeout((
        emit('login')
      ),1000)
      
    }, 3000);
   }
  
  
}
 
</script>


<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-color: white;
  .form {
    width: 100%;
    margin-top: 18vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 21.3vw;
      height:  21.3vw;
      margin-bottom: 6vh;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .field {
      margin-top: 2vh;
      width:78.6vw;
       height: 8vh;
      background-color: #f9f9f9;
     
    }
    .loginButtom {
      margin-top: 4.7vh;
      width: 78.6vw !important;
      height: 7vh!important;
    }
  }
  .bottom{
    display: flex;
    margin-top: 2.3vh;
    font-size: 4vw;
     opacity: .5;
    color: #000000;
  width: 37.3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
 
    .line{
       width: 1px;
       height: 2vh;
       background-color: #000000;
       
    }
  }
  // .error{
  //   border: 1px solid red;
  // }
}
</style>
